<template>
	<z-paging ref="paging" bgColor="transparent" class="content" :loading-more-enabled="false" hide-empty-view v-model="data" @query="queryList">
		<template #top>
			<my-navbar
				:bgUrl="`${$imgurl}/static/cj-bg3.png`"
				title="谜货抽奖"
				title-color="#fff"
				leftIconColor="#fff"
				:scrollTop="scrollTop"
				:autoBack="true"
			/>
		</template>
		<view class="box title-box" v-if="data!=''">
			<view class="tit">
				<view class="h1">
					{{data.name}}
				</view>
				<view class="status" :class="{off:data.status==2}">{{data.status==1?'进行中':'已结束'}}</view>
			</view>
			<view class="values">
				<view class="item">
					<view class="val">
						{{data.lottery_num}}
					</view>
					<view class="msg">
						参与人数
					</view>
				</view>
				<view class="item">
					<view class="val">
						{{data.product_num-data.over_num}}
					</view>
					<view class="msg">
						剩余礼物
					</view>
				</view>
			</view>
			<view class="btns-box">
				<button open-type="share"  class="it"   >
					<image :src="`${$imgurl}/static/icon-share.png`" mode=""></image> {{data.share}}
				</button>
				<button  class="it" @click="onCollect">
					<up-icon name="heart-fill" v-if="data.is_collect" color="#FF4A40" size="42rpx"></up-icon> 
					<up-icon name="heart" v-else color="#B0B0B0" size="42rpx"></up-icon> 
					{{data.collect_num}}
				</button>
				<!-- <button  class="it" >
					<image :src="`/static/icon-shoucang.png`" mode=""></image> 123
				</button>
				<button  class="it">
					<image :src="`/static/icon-jubao.png`" mode=""></image> 举报
				</button> -->
			</view>
		</view>
		
		<view class="box goods-box" v-if="data!=''&&data.cartInfo.length>0">
			<view class="title">
				礼品信息
			</view>
			<my-good-item :list="data.cartInfo" />
		</view>
		<view class="box goods-box" style="padding:28rpx 0 0 0;">
			<view class="title" style="padding:0 28rpx">
				参与记录
			</view>
			<my-user-list :list="data.joinUserList" msg="参与了该谜奖">
				<template #btn="{ item }">
					<view class="user-btn">
						{{item.check_status?'成功':'失败'}}
					</view>
				</template>
			</my-user-list>
		</view>
		<button open-type="contact" class="box btn-box">
			<image :src="`${$imgurl}/static/icon-kf2.png`" mode=""></image> 联系客服
		</button>
	</z-paging>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onPageScroll,onShareAppMessage} from "@dcloudio/uni-app"
	import {getLotteryInfoApi} from "@/api/lottery.js"
	import {getSaveTipsConfig,activeCollectApi} from "@/api/public.js"
	const scrollTop=ref(0)
	onPageScroll((e)=>{
		if(e.scrollTop>=30){
			scrollTop.value=30
		}else{
			scrollTop.value=e.scrollTop/3
		}
	})
	// 使用 reactive 创建响应式对象  
	const timeData = ref({});  
	const data=ref('')
	const id=ref('')
	const paging=ref(null)
	const tips=ref([])
	const carckRef=ref(null)
	// 定义 onChange 方法  
	const onChange = (e) => { 
	  timeData.value = e;  
	};  
	onLoad(async (obj)=>{
		id.value=obj.id
		
		// paging.value.reload()
	})
	const queryList=async (pageNo, pageSize)=>{
		//请求接口数据
		const res=await getLotteryInfoApi({id:id.value})
		data.value=res.data
		
		paging.value.complete([]);
	}
	//立即破解点击
	const onAnswer=async ()=>{
		uni.navigateTo({
			url:'./lottery?id='+id.value
		})
	}
	const onCollect=async ()=>{
		//请求接口数据
		const res=await activeCollectApi({type:'lottery',id:id.value,collect_type:data.value.is_collect?'n':'y'})
		
		data.value.is_collect=!data.value.is_collect
		data.value.collect_num=data.value.is_collect?(data.value.collect_num+1):(data.value.collect_num-1)
	}
	onShareAppMessage((e)=>{
		return {
			title: '我正在参与【'+data.value.name+'】抽奖，邀请你一起参与',
			desc: '邀请你一起参与抽奖！',
			path: '/pages/lottery/details?id='+id.value,
			imageUrl: data.value.productInfo[0].image
		}
	})

</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
		position: relative;
		
	}
	.content{
		::v-deep{
			// .zp-view-super{
			// 	background-color: #F5F6FA;
			// }
		}
	}
	.title-box{
		margin-top:20rpx;
		padding:28rpx;
		padding-bottom: 0;
		border-radius: 20rpx;
		background-color: #fff;
		.values{
			margin-top:24rpx;
			background-color: #F7F8FA;
			border-radius: 8rpx;
			display: flex;
			padding: 30rpx 0;
			.item{
				flex: 1;
				text-align: center;
				line-height: 1;
				
				.val{
					font-size:36rpx;color:#242529;
					font-weight: bold;
				}
				.msg{
					color:#878787;
					font-size:26rpx;margin-top:16rpx;
				}
				&:nth-child(2){
					border-left:1rpx solid #DADADA;
					.val{
						color:#FF4A40;
					}
				}
			}
		}
		.tit{
			display: flex;
			.h1{
				font-weight: bold;
				flex:1;
				width: 600px;
				font-size: 32rpx;
			}
			.status{
				margin-left:20rpx;
				padding:0 16rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 48rpx;
				background-color: #FFF2F0;
				color:#FF4A40;
				&.on{
					background-color: #EFF5FE;
					color:#199FFE;
				}
				&.off{
					background-color: #F5F6FA;
					color:#838A99;
				}
			}
			
		}
		.tip{
			margin-top:8rpx;
			color:#FF401A;
			font-size:24rpx;
		}
		.time{
			display: flex;
			padding:20rpx 0;
			align-items: center;
			font-size:28rpx;color:#141311;
			.times{
				display: flex;
				align-items: center;
				gap: 20rpx;
				.custom {
			        width: 36rpx;
			        height: 36rpx;
			        background-color: #FFE7E5;
			        border-radius: 4px;
			        justify-content: center;
			        align-items: center;
					text-align: center;
			        color: #FF4A40;
			        font-size: 22rpx;
					line-height: 36rpx;
					
			    }
			}
		}
		.btns-box{
			display: flex;align-items: center;
			justify-content: space-between;
			.it{
				&:after,&:before{
					display: none;
				}
				background-color: #fff;
				padding:24rpx 0;margin:0;
				display: flex;align-items: center;
				font-size:24rpx;
				color:#A8A8A8;
				image{
					width:32rpx;height:32rpx;margin-right:8rpx;
				}
			}
		}
	}
	.goods-box{
		padding:28rpx;
		background-color: #fff;
		margin-top:20rpx;
		border-radius: 20rpx;
		padding-bottom: 0;
		.title{
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			justify-content: space-between;
			.a{
				display: flex;align-items: center;font-size: 24rpx;
				color:#9BA2AB;
				font-weight: initial;
			}
		}
		.tip-box{
			font-size: 28rpx;
			color:#141311;
			line-height: 48rpx;
			margin-top:28rpx;
			padding-bottom: 24rpx;
		}
		
	}
	
	
	.btn-box{
		background-color: #fff;
		margin-top:20rpx;
		display: flex;
		height:104rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		justify-content: center;align-items: center;
		&:before,&::after{
			display: none;
		}
		image{
			width:40rpx;
			height:40rpx;
			margin-right:14rpx;
		}
	}
	.user-btn{
		width: 144rpx;
		line-height: 56rpx;
		background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color:#fff;
	}
	
</style>
